<template>
  <view class="basic-info">
    <view class="top">
      <view class="title-logo"></view>
      <view class="major-name">基本信息</view>
    </view>
    <view class="middle">
      <view v-for="item in basicInfoList" class="info-item">
        <view class="item-value" :class="[
          item.value.length > 6 && item.name == '授予学位'
            ? 'small-font'
            : 'big-font',
        ]">
          {{ item.value || "-" }}</view>
        <view class="info-logo">
          <image class="avatar" mode="aspectFill" :src="item.iconUrl"></image>
          <span>{{ item.name }}</span>
        </view>
      </view>
    </view>
    <view class="bottom">
      <view class="content">
        <span :class="[isIOS ? 'span-ios' : 'span-android']">专业介绍：</span>
        <!-- <u-input
          class="introduction"
          placeholder=" "
          @click="changeHeight('introduction')"
          type="textarea"
          disabled="ture"
          :auto-height="isAutoHeight"
          v-model="showMajorIntroduction"
        /> -->
        <view class="my-introduction" @click="changeHeight('introduction')">{{
          showMajorIntroduction
        }}</view>
        <view class="glass" v-if="!textareaHeight"></view>

        <view v-if="showMajorIntroduction && showMajorIntroduction != '暂无数据'"
          :class="[textareaHeight ? 'avatar-rotate' : 'avatar']" @click="changeHeight('introduction')">
          <!-- <image mode="aspectFill" :src="downArrowImg"></image> -->
        </view>
        <!-- <image :class="[textareaHeight ? 'avatar-rotate' : 'avatar']" mode="aspectFill" :src="downArrowImg"
                    @click="changeHeight('introduction')"></image> -->
      </view>
      <view class="content">
        <span :class="[isIOS ? 'span-ios' : 'span-android']">开设课程：</span>
        <!-- <u-input
          class="introduction"
          placeholder=" "
          @click="changeHeight('curriculum')"
          type="textarea"
          disabled="ture"
          :auto-height="isAutoHeight"
          v-model="showCurriculum"
        /> -->
        <view class="my-introduction" @click="changeHeight('curriculum')">{{
          showCurriculum
        }}</view>
        <view class="glass" v-if="!classAreaHeight"></view>
        <!-- <image :class="[classAreaHeight ? 'avatar-rotate' : 'avatar']" mode="aspectFill" :src="downArrowImg"
                    @click="changeHeight('curriculum')">
                </image> -->
        <view v-if="showCurriculum && showCurriculum != '暂无数据'" :class="[classAreaHeight ? 'avatar-rotate' : 'avatar']"
          @click="changeHeight('curriculum')">
          <!-- <image mode="aspectFill" :src="downArrowImg"></image> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { tagInfo } from "@/api/modules/career";
export default {
  props: {
    positionTagId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isIOS: uni.getSystemInfoSync().platform == "ios",
      downArrowImg:
        this.$imgBase + "career/positionDictionary/downArrowInBasicInfo.png",
      textareaHeight: false, // false表示隐藏 true 表示全部展示
      classAreaHeight: false, // 同上
      isAutoHeight: true,
      showMajorIntroduction: "",
      majorIntroduction:
        "本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计本专业培养具有国际设计文化视野、中国设计",
      curriculum:
        "《C++程序设计》、《C++程序设计》、《C++程序设计》、《C++程序设计》、《C++程序设计》、《C++程序设计》、《C++程序设计》、《C++程序设计》",
      showCurriculum: "",
      basicInfoList: [
        {
          name: "专业代码",
          value: "0225",
          iconUrl: this.$imgBase + "career/zydm.png",
        },
        {
          name: "修业年限",
          value: "四年",
          iconUrl: this.$imgBase + "career/xynx.png",
        },
        {
          name: "授予学位",
          value: "理学学士",
          iconUrl: this.$imgBase + "career/syxw.png",
        },
        {
          name: "平均薪酬",
          value: "12555",
          iconUrl: this.$imgBase + "career/pjxc.png",
        },
      ],
    };
  },

  watch: {
    // positionTagId(newValue, oldValue) {
    //     if (newValue) {
    //         this.tagInfoFn();
    //     }
    // },
  },
  methods: {
    changeHeight(type) {
      if (type == "introduction") {
        if (this.textareaHeight) {
          this.showMajorIntroduction = this.majorIntroduction.substring(0, 50);
        } else {
          this.showMajorIntroduction = this.majorIntroduction;
        }
        this.textareaHeight = !this.textareaHeight;
      } else {
        if (this.classAreaHeight) {
          this.showCurriculum = this.curriculum.substring(0, 50);
        } else {
          this.showCurriculum = this.curriculum;
        }
        this.classAreaHeight = !this.classAreaHeight;
      }
    },
    async tagInfoFn() {
      const params = {
        positionTagId: this.positionTagId || "10002",
      };
      const res = await tagInfo(params);
      if (res.code == 200) {
        this.basicInfoList[0].value = res.data.tagCode; // 专业代码
        this.basicInfoList[1].value = res.data.tagTimeDesc; // 修业年限
        this.basicInfoList[2].value = res.data.tagDesc; // 授予学位
        this.basicInfoList[3].value = res.data.averageSalary; // 平均薪酬
        this.majorIntroduction = res.data.tagIntroduction || "暂无数据"; // 专业介绍
        this.curriculum = res.data.classes || "暂无数据"; // 开设课程、
        this.showMajorIntroduction = this.majorIntroduction.substring(0, 50);
        this.showCurriculum = this.curriculum.substring(0, 50);
      }
    },
  },
  created() {
    this.tagInfoFn();
    this.isIOS = uni.getSystemInfoSync().platform == "ios";
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "career/";

@font-face {
  font-family: "D-DIN-PRO-800-ExtraBold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/fontFamily/careerPath/D-DIN-PRO-800-ExtraBold.ttf");
}

@font-face {
  font-family: "D-DIN-PRO-700-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

.basic-info {
  background: #ffffff;
  border-radius: 24rpx;
  width: 100%;
  padding: 28rpx 24rpx 10rpx 24rpx;
  margin-bottom: 20rpx;

  .top {
    display: flex;
    flex-direction: row;
    align-items: center;

    .title-logo {
      width: 8rpx;
      height: 28rpx;
      background: #f75a3e;
      border-radius: 4rpx;
      margin-left: 8rpx;
    }

    .major-name {
      font-weight: bold;
      font-size: 32rpx;
      color: #000000;
      margin-left: 24rpx;
    }
  }

  .middle {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 26rpx;

    .avatar {
      width: 30rpx;
      height: 30rpx;
    }

    .info-item {
      width: calc(50% - 16rpx);
      height: 136rpx;
      background: #f8f8f8;
      border-radius: 12rpx;
      padding: 20rpx 24rpx;
      margin: 8rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .big-font {
        font-size: 36rpx;

        vertical-align: center;
      }

      .small-font {
        font-size: 26rpx;
      }
    }

    .item-value {
      font-weight: 800;
      font-size: 36rpx;
      color: #333333;
      font-family: D-DIN-PRO-700-Bold;
      height: 48rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .info-logo {
      display: flex;
      flex-direction: row;
      align-items: center;
      /* margin-top: 24rpx; */

      .avatar {
        margin-right: 18rpx;
      }

      span {
        font-weight: 400;
        font-size: 28rpx;
        color: #959da8;
        font-family: PingFangSC, PingFang SC;
      }
    }
  }

  .bottom {
    margin-top: 48rpx;

    .content {
      font-family: D-DIN-PRO, D-DIN-PRO;
      font-weight: bold;
      font-size: 30rpx;
      color: #000000;
      margin-bottom: 36rpx;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;

      .avatar {
        position: absolute;
        top: 45%;
        right: 0;
        width: 32rpx;
        height: 32rpx;
        background-image: url($img-base-person + "positionDictionary/downArrowInBasicInfo.png");
        background-size: 100%;

        img {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .avatar-rotate {
        position: absolute;
        top: 90%;
        right: 0;
        width: 32rpx;
        height: 32rpx;
        transform: rotate(180deg);
        background-image: url($img-base-person + "positionDictionary/downArrowInBasicInfo.png");
        background-size: 100%;

        img {
          width: 32rpx;
          height: 32rpx;
        }
      }

      span-ios {
        width: 150rpx;
        margin-top: 19rpx;
      }

      span-android {
        width: 150rpx;
        margin-top: 5rpx;
      }

      .introduction {
        /* flex-grow: 1; */
        width: 470rpx;
        overflow: hidden;
        /* max-height: 84rpx; */
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
        font-family: D-DIN-PRO, D-DIN-PRO;
        padding: 0;
      }

      .my-introduction {
        width: 470rpx;
        white-space: pre-wrap;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
        line-height: 40rpx;
        font-family: D-DIN-PRO, D-DIN-PRO;
      }

      .glass {
        width: 20rpx;
        height: 100%;
        position: absolute;
        right: 32rpx;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 100%);
      }

      .u-input__textarea {
        padding: 0 !important;
      }
    }
  }
}
</style>
